
.do-nav
	height: 45px
	background-color : $blue-color


.do-nav-head
	display : inline-block
	float : right
	margin-right : 20px

.do-nav-head > li
	display : inline-block
	overflow : hidden

//======== { do-nav-stacked } ===========

.do-nav-stacked
	width:200px
	min-height:600px
	padding-left:0
	list-style:none
	background-color: $gray-bakcground-color

.do-nav-stacked > li
	position:relative
	display:block
	border-bottom: 1px solid $border-color

.do-nav-stacked > li:first-child
	border-top : 1px solid $border-color

.do-nav-stacked > li:hover	
	background-color: $blue-color
	
.do-nav-stacked > li:hover a
	color:$white-color

.do-nav-stacked > li:hover .do-nav-icon
	opacity: 1
	filter:alpha(opacity=100)

.do-nav-stacked > li > a
	position: relative
	display:block
	padding:11px 20px
	text-decoration: none
	font-size:16px
	color: $dark-gray-plus-color
	
.do-nav-stacked  .active
	background-color: $blue-color

.do-nav-stacked  .active 
	color:$white-color
	font-weight: 900

.do-nav-stacked .active  .do-nav-icon
	opacity: 1
	filter:alpha(opacity=100)
	

.do-nav-icon
	float:right
	opacity: 0
	filter:alpha(opacity=0)

.do-nav-icon > i
	font-size: 1.2em
	
//====== {do-nav-tab} ========

.do-nav-tab
 	background-color: $gray-bakcground-color
 	border-bottom : 2px solid $blue-color

.do-nav-tab > li
	display: inline-block
	margin-right : -4px

.do-nav-tab > li:hover .arrow
	display: inline
	bottom : -9px /9

.do-nav-tab > li:hover a
	font-weight: 900

.do-nav-tab > li > a
	position: relative
	display: block
	padding: 11px 15px
	color : $dark-gray-color
	text-decoration: none

.do-nav-tab .active .arrow
	display: inline

.do-nav-tab .arrow
	display:none
	position : absolute
	left : 50%
	bottom : -8px
	margin-left : -8px
	font-size : 1.15em
	color: $blue-color

// =============={ do-nav-tab-pretty } =============

.do-nav-tab-pretty
 	background-color: #f0f6fc
 	padding-left:15px

.do-nav-tab-pretty > li
	display: inline-block
	margin-right : -4px

.do-nav-tab-pretty > li:hover
	background-color : $white-color

.do-nav-tab-pretty > li:hover a
	border-top : 2px solid $blue-color
	font-weight : 700

.do-nav-tab-pretty > li > a
	display : block
	color : $gray-plus-color
	padding : 8px 14px
	border-top : 2px solid transparent
	+border-radius(3px)


.do-nav-tab-pretty > .active  
	background-color : $white-color

.do-nav-tab-pretty > .active  a
	border-top : 2px solid $blue-color
	font-weight : 700

//========== { do-nav-tab-smile } =================

.do-nav-tab-smile
	margin:15px 0;

.do-nav-tab-smile > li
	display : inline-block
	border-left : 1px solid $border-color
	margin-right : -4px
	padding: 0 3px

.do-nav-tab-smile > li > a
	padding : 0 5px

.do-nav-tab-smile > li > a:hover
	background-color : $blue-color
	color: $white-color

.do-nav-tab-smile > li:first-child
	border-left: none

// ================ { do-nav-record } ========================
.do-nav-record > .do-nav-record-img
	width: 100%

// ================ { do-nav-list } ========================

.do-nav-list

.do-nav-list > li 
	display : inline-block
	margin-right: -4px

.do-nav-list > li > a
	padding : 2px 5px

.do-nav-list > li:first-child a
	color :$blue-color
	font-weight : 900


//===================== { do-nav-list-live }  ==================


.do-nav-list-live > li
	display : inline-block
	margin-right : -4px
	border-left : 1px solid $border-color

.do-nav-list-live > li > a
	padding : 2px 8px

.do-nav-list-live > li:first-child
	border-left:none

.do-nav-list-live > li:first-child a
	color : $blue-color
	font-weight : 900


// ================= { do-nav-list-square } ==========================

.do-nav-list-square
	display: inline-block;

.do-nav-list-square > li
	display : inline-block
	margin-right : -1px
	border: 1px solid $border-color

.do-nav-list-square > li:first-child
	border: none;
	background-color : $gray-bakcground-color

.do-nav-list-square > li:first-child:hover a
	border-bottom : 2px solid transparent
	color : $base-color

.do-nav-list-square > li > a
	display : block
	padding : 4px 6px
	border-bottom : 2px solid transparent

.do-nav-list-square > li > a:hover
	border-bottom : 2px solid $blue-color

.do-nav-list-square > .active  a
	border-bottom : 2px solid $blue-color
	font-weight : 900




// ================= { do-nav-list-tabs } ==========================


.do-nav-list-tabs
	display: inline-block;

.do-nav-list-tabs > li
	display : inline-block
	margin-right : -4px
	border: 1px solid $border-color
	background-color:$gray-bakcground-color

.do-nav-list-tabs > li > a
	display : block
	padding : 4px 6px
	border-bottom : 2px solid transparent

.do-nav-list-tabs > li > a:hover
	border-bottom : 2px solid $blue-color
	background-color:$white-color

.do-nav-list-tabs > .active  a
	border-bottom : 2px solid $blue-color
	font-weight : 900

//========================= {do-nav-list-slide}================== 

.do-nav-list-slide
	display: inline-block
	float: right

.do-nav-list-slide > li
	display: inline-block
	margin-left : -4px
	border: 1px solid $border-color
	background-color:$gray-bakcground-color

.do-nav-list-slide > li > a
	display : block
	padding : 5px 10px
	